<template>
  <tele-modal :dialogVisible.sync="visible">
    <div class="dialog-content">
      <p class="text" style="font-size: 18px;margin-top: 18px;margin-bottom: 0;">用户注册</p>
      <p class="login-warning" v-show="errors.any() || isUser">
        <!-- <span v-show="isNouser" @click="$emit('im-registe'), clearUser()" style="color: #94C05A;">&nbsp;&nbsp;该手机号尚未注册,可以注册</span> -->
        <span class="el-icon-warning" v-show="isUser">&nbsp;&nbsp;用户已经注册,请直接登录</span>
        <span class="el-icon-warning" v-show="isPhone && !isUser">&nbsp;&nbsp;您所填写的手机号已经注册,请更换一个手机号</span>
        <span class="el-icon-warning" v-if="errors.items.length > 0 && !(isPhone && !isUser)">&nbsp;&nbsp;{{errors.items[0].msg}}</span>
        <!-- <span class="el-icon-warning" v-show="user.password !== user.repassword">&nbsp;&nbsp;两次密码不一致</span> -->
      </p>
      <div class="dialog-input" :style="{marginTop: (errors.any() || isUser ? 0 : 50) + 'px'}">
        <el-input placeholder="请输入用户名"  v-model.trim="user.userName" v-validate.disable="'required'" name="用户名" @blur="valiUser('userName')"></el-input>
      </div>
      <div class="dialog-input">
        <el-input placeholder="请输入电话号码"  v-model.trim="user.phone" v-validate.disable="'required|phone'" name="电话" @blur="valiUser('phone')"></el-input>
      </div>
      <div class="dialog-input">
        <el-input placeholder="请输入密码" type="password" v-model.trim="user.password"
        v-validate.disable="'required|password'" name="密码"></el-input>
      </div>
      <div class="dialog-input">
        <el-input placeholder="确认密码" type="password" v-model.trim="user.repassword" ></el-input>
      </div>
      <el-row class="diaglo-btn" :gutter="18">
        <el-col :span="12">
          <el-input placeholder="验证码" v-model.trim="user.smsCode" v-validate.disable="'required|zipCode'" name="验证码"></el-input>
        </el-col>
        <el-col :span="12">
          <el-button type="success  width-full" plain round @click="svc()" :disabled="(times !== 0 && times !== 60) || isUser">
            <span v-show="times !== 60">{{times}}s</span>
            <span v-show="times === 60">发送验证码</span>
          </el-button>
        </el-col>
      </el-row>
      <el-button type="success  width-full diaglo-btn" round @click="registe()" :disabled="isUser">注册</el-button>
      <div class="fr register-func">
        <el-button type="text" @click="$emit('registe2login')">使用已有账号登录</el-button>
      </div>
    </div>
  </tele-modal>
</template>

<script>
import axios from 'axios'

  export default {
    title: '注册',
    name: 'register',
    props: {
      width: {
        type: String,
        default: '640px'
      },
      registerVisible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        user: {
          userName: '',
          phone: '',
          password: '',
          repassword: '',
          smsCode: ''
        },
        visible: false,
        times: 60, // 验证吗计数其
        isUser: false, // 用户是否注册
        isPhone: false // 用户手机号是否注册
      }
    },
    mounted () {
      this.visible = this.registerVisible
    },
    methods: {
      registe () {
        this.$validator.validate().then(result => {
          if (!result) {
            // this.$message({
            //   showClose: true,
            //   message: this.$connErmsg(this.$validator.errors.items),
            //   type: 'error'
            // })
          } else {
            if (this.user.password !== this.user.repassword) {
              this.$message({
                showClose: true,
                message: '两次密码不一致,请重新输入',
                type: 'error'
              })
              return
            }
            axios.post('/mscs/user/registered', this.$paramsConvert(this.user)).then((res) => {
              this.$message({
                message: res.data.data,
                type: res.data.code === 1 ? 'success' : 'error'
              })
              if (res.data.code === 1) {
                this.$emit('register-success')
                this.$clearObj(this.user)
              }
            }).catch((error) => {})
          }
        })
      },
      svc () {
        this.$validator.validate('电话').then(result => {
          if (this.user.phone === '' || this.$validator.errors.has('电话')) {
            // this.$message({
            //   showClose: true,
            //   message: '电话号码格式错误，查证后重新获取验证码',
            //   type: 'error'
            // })
          } else {
            axios.post('/mscs/user/sendSMSVerifyCode', this.$paramsConvert({userName: this.user.phone, type: 'REGISTERED'})).then((response) => {
              if (response.data.code !== 1) {
                this.$codeError(response)
              } else {
                this.$message({
                  showClose: true,
                  message: '短信已发送成功，注意查收',
                  type: 'success'
                })
              }
            }).catch((error) => {
              this.$catchError(error)
            })
            this.countdown()
          }
        }).catch((e) => {})

      },
      countdown () {
        let int = setInterval(() => {
          this.times--
          if (this.times === 0) {
            window.clearInterval(int)
            this.times = 60
          }
        }, 1000)
      },
      valiUser (str) {
        // this.$validator.validate().then(result => {
        if (str === 'userName') {
          // if (!this.$validator.errors.has('username')) {
          if (this.user.userName.length === 0) return
            axios.get(`/mscs/user/findUserByUsername?userName=${this.user.userName}`).then((res) => {
              if (res.data.code === 1) {
                this.isUser = true
              } else {
                this.isUser = false
              }
            })
          // }
        }
        if (str === 'phone') {
          if (!this.$validator.errors.has('phone')) {
            if (this.user.userName.length === 11) {
              axios.get(`/mscs/user/findUserByUsername?phone=${this.user.phone}`).then((res) => {
                if (res.data.code === 1) {
                  this.isPhone = true
                } else {
                  this.isPhone = false
                }
              })
            }
          }
        }

        // })
      },
    },
    watch: {
      'registerVisible' (val) {
        this.visible = this.registerVisible
      },
      'visible' (val) {
        if (!val) {
          Object.keys(this.user).forEach(key => {
            this.user[key] = ''
          })
          this.$emit('update:registerVisible', false)
        }
      }
    }
  }
</script>
<style>
  .register-func, .register-func .el-button{
    color: #497D03;
  }
  .register-func button {
    color: #497D03;
    padding: 0;
  }
</style>
